<!-- 开通线上支付 -->
<template>
  <div class="warp">
    <div class="name-out">聚合支付</div>
    <div class="content-one">
      <div class="left">
        <img class="logo" src="@/assets/icons/finance/logo.jpg" alt="" />
        <div class="item item1">
          <div class="label">聚合支付</div>
          <div class="value">{{ merchantStatusMap[infoData.status] }}</div>
        </div>
        <div class="item">
          <div class="label">交易手续费</div>
          <div class="value">{{ infoData.percentRate }}%/笔</div>
        </div>
        <div class="item">
          <div class="label">支持的付款方式</div>
          <div class="value">{{ infoData.channel }}</div>
        </div>
      </div>
      <a-button class="right" type="primary" @click="handleApply">{{
        infoData.status === merchantStatusEnum.NOT ? '申请开通' : '查看申请单'
      }}</a-button>
    </div>
    <div class="content-two">
      <div class="title">介绍</div>
      <div class="text">
        聚合支付支持企业、个体及个人小程序、APP及网站接入，接入成功后可以满足认证主体在各种渠道内实现微信收款的需求。
      </div>
    </div>
    <div class="content-three">
      <div class="title">申请流程</div>
      <div class="flex-warp">
        <Process num="1" title="提交资料" desc="在线提交营业执照、法人身份证银行卡等资料，等待聚合支付入网审核。" />
        <img class="icon" src="@/assets/icons/finance/right.png" alt="" />
        <!-- <Process
          num="2"
          title="回复短信和入网确认"
          desc="提交申请后，聚合支付审核过程中会给您发短信和确认邮件，按指引回复和确认入网信息。"
        />
        <img class="icon" src="@/assets/icons/finance/right.png" alt="" /> -->
        <Process
          num="2"
          title="在线签署协议"
          desc="聚合支付团队会在一个工作日内完成审核，审核通过后请在线签约，确认开通支付相关产品。"
        />
        <img class="icon" src="@/assets/icons/finance/right.png" alt="" />
        <Process
          num="3"
          title="完成微信实名认证"
          desc="签约完成后，扫描页面二维码，要求完成微信实名认证，即可在各种场景中完成微信支付收款。"
        />
      </div>
    </div>
    <AuthModal ref="authModal" />
  </div>
</template>

<script>
import Process from './components/process.vue'
import AuthModal from './components/authModal.vue'
import { SelectMerchantStatus } from '@/api/finance/finance'
import Vue from 'vue'
import { TENANTID } from '@/store/mutation-types'
import { getAuthStatus } from '@/api/system/system'
import { merchantStatusEnum } from '@/enums/system'
export default {
  components: {
    Process,
    AuthModal
  },
  data() {
    return {
      tenantId: Vue.ls.get(TENANTID),
      infoData: {},
      merchantStatusMap: {
        0: '未开通',
        1: '开通中',
        2: '开通完成'
      },
      merchantStatusEnum,
      authInfo: {},
      params: {
        authType: 2,
        tenantId: Vue.ls.get(TENANTID),
        // redirectUri: process.env.VUE_APP_MODEL_BASE_URL + '/system/miniProgramManager'
        redirectUri: `${window.origin + process.env.VUE_APP_API_BASE_URL}/system/miniProgramManager`
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    async getSelectMerchantStatus() {
      let res = await SelectMerchantStatus({ tenantId: this.tenantId })
      this.infoData = res.data || {}
    },
    async GetAuthStatus() {
      let res = await getAuthStatus(this.params)
      this.authInfo = res.data || {}
      if (!this.authInfo.name) this.$refs.authModal.show()
    },
    async handleApply() {
      if (!this.authInfo.name) return this.$refs.authModal.show()
      this.$router.push({
        path: '/system/openOnlinePayment',
        query: {
          id: this.infoData.id,
          tenantId: this.tenantId
        }
      })
    }
  },
  created() {
    this.getSelectMerchantStatus()
    this.GetAuthStatus()
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
.warp {
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  .name-out {
    font-size: 24px;
    font-weight: bold;
  }
  .content-one {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    .left {
      display: flex;
      align-items: center;
      .logo {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 50px;
        .label {
          font-size: 16px;
          font-weight: bold;
        }
        .value {
          margin-top: 5px;
          font-weight: bold;
        }
      }
      .item1 {
        margin-left: 10px;
      }
    }
  }
  .content-two,
  .content-three {
    padding-top: 40px;
    .title {
      font-size: 18px;
      font-weight: bold;
    }
  }
  .content-two {
    .text {
      font-size: 16px;
      font-weight: bold;
      margin-top: 20px;
      margin-left: 10px;
    }
  }
  .content-three {
    .flex-warp {
      display: flex;
      align-items: center;
      margin-top: 30px;
      .icon {
        width: 40px;
        height: 40px;
        margin: 0 15px;
      }
    }
  }
}
</style>
